
<template>
<!-- 新增弹框组件 -->
  <el-dialog
    title="提示"
    :visible="showDialog"
    width="30%"
    @close="closeDialog"
    @open="openDialog"
    >
    <!-- 部门负责人列表在打开弹窗的时获取 所以 @open-->
    <template #default>
      <!-- 
        el-form 绑定一个表单对象 + 绑定规则对象
        el-form-item 通过prop指定当前表单项 要用哪条规则
        el-input 双向绑定
      -->
      <el-form :model='addForm' ref="deptForm" label-width="120px" :rules="rules">
        <el-form-item label="部门名称"  prop="name">
          <el-input v-model="addForm.name" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="addForm.code" placeholder="请输入部门编码"></el-input>
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select  placeholder="请选择" v-model="addForm.manager">
            <!-- label 文案 value 选中哪个value会被自动绑定到selec v-model后面的属性上 一般和后端交互 提交给后端 -->
            <el-option
              v-for="item in manageList"
              :key="item.id"
              :label="item.username"
              :value="item.username">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="addForm.introduce" placeholder="请输入部门介绍"></el-input>
        </el-form-item>
      </el-form> 
    </template>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { EmployeeSimple } from '@/api/employees'
import { addDpartment,  getDepartDetail, updateDepartment } from '@/api/department'
//props传入的数据不能直接修改， rendonly单项数据流 通过自定义事件修改父组件中的数据 emit
export default {
  name: 'addDpartment',
  // 接收父组件传过来的信息
  props: {
    showDialog:{
      default: false,
      type: Boolean
    },
    curId: {
      default: '',//默认值
      type: String
    }
  },
  data() {
    return {
      addForm: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      manageList: [],
      rules:{
        name: [
          {required: 'true', message: '部门名称不能为空', trigger: 'blur'},
          {min:1, max: 50, message: '部门名称为2-50个字符', trigger: 'blue'}
        ],
        code: [
          {required: 'true', message: '部门编码不能为空', trigger: 'blur'},
          {min:1, max: 50, message: '部门编码为1-50个字符', trigger: 'blur'}
        ],
        manager: [
          {required:'true', message: '请选择部门负责人', trigger: 'blur'},
        ],
        introduce: [
          {required: 'true', message: '部门介绍不能为空', trigger: 'blur'},
          {min: 1, max: 300, message: '部门介绍为1-300个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    closeDialog() {
      // console.log('弹框要关闭了');
      // 子传父的方式 抛出事件 把showdialog改为false
      this.$emit('close-dialog')
    },
    async openDialog() {
      // console.log('弹窗打开');
      // 在弹窗打开时，获取负责人列表
      const res = await EmployeeSimple()
      // console.log(res);
      this.manageList = res
    },
    // 点击确定按钮 
    confirm() {
      
      // 兜底校验
      this.$refs.deptForm.validate(async (valid) => {
        
        if(valid) {
          // 判断是调用新增还是编辑接口  根据有无id
          if(!this.addForm.id){
            // 新增
            // console.log({...this.addForm, pid:this.curId});
            // 校验通过调接口 提交数据
            // 调接口给后端传数据(name code introduce manager pid新增子部门给谁)
            // pid在父组件获取 子组件使用 所以父传子 获取
            //父组件中点击谁 就要获取到谁的id值
            await addDpartment({...this.addForm, pid: this.curId})
          }else{
            // 更新
            await updateDepartment(this.addForm)
          }
          // 刷新列表(调接口 子组件要掉父组件的一个方法 子传父)
          this.$emit('reset-date')
          // 关闭弹框
          this.$emit('close-dialog')
          // 提示用户 三元表达式
          this.$message.success(`${this.addForm.id ? '更新成功' : '添加成功'}`)
          // 清空数据 
          this.addForm = {
            name: '',
            code: '',
            manager: '',
            introduce: ''
          }
          // 为了清除表单的校验状态
          this.$refs.deptForm.resetFields()
        }
      })
    },
    // 点击编辑 根据id数据回填 数据在父组件 
    async getDetail(id) {
      const res = await  getDepartDetail(id)
      this.addForm = res 
    }
  } 
}
</script>

<style>

</style>